/* общий стиль */
  body {font-family: Arial, Tahoma, sans-serif; margin: 2em; }
  <!-- font-size: 62.5%; -->
  p {
   font-size: 1.7em;
  }
  a {
   color: #0066cc;
   text-decoration: none;
   outline: none;
  }
  /*a:link {
   color: #0066cc;  
  } 
  a:visited {color: #00cc63; }*/  
  a:hover {
   text-decoration: underline;
   color: #0088ee; 
  }
  a:active, a:focus {
   color: #cc6600;  <!-- #666 -->
   background-color: #f4f4f4; 
   background-color: #d4d4d4; <!-- Выбраная ветка -->
  }
  a.current {
   color: black;
   font-weight: bold;
   background-color: #f4f4f4; 
  }

  /* Дерево многоуровневое
  -------------------------------- */
  #multi-derevo {
   /* width: 220px; /* блок под дерево */
   border: solid; /* границы блока */
   border: none; /* границы блока */
   border-color: silver gray gray silver ;
   border-width: 2px;
    background-color: #fed;  <!-- Цвет фона области дерева -->
   padding: 0 0 1em 0; /* нижний отступ */
   font-size: 1.5em;  <!-- Размер текста для всео дерева -->
  }
   span { /* обертка пункта */
     text-decoration: none;
     display: block; /* растянем до правого края блока */
     margin: 0 0 0 1.2em;      
     background-color:  transparent;
     border: solid silver ; /* цвет линий */  
     border-width: 0 0 1px 1px; /* границы: низ и лево */
   }
    span a {/* тест элемента дерева */
      display: block; 
      position: relative;
      top: .95em; /* смещаем узел на середину линии */
      background-color: #fed; /* закраска в цвет фона обязательна иначе будет видно линию */
      margin: 0 0 .2em .7em; /* делаем промежуток между узлами, отодвигаем левее  */
      padding: 0 0.3em; /* небольшой отступ от линии */
     }
    h4 {/* заголовок дерева */
     font-size: 1.5em;
     font-weight: bold;
     margin: 0;
     padding: 0 .25em;
     border-bottom: 1px solid silver;
    }
   h4 a {
     display: block;
   }
   ul, li {
     list-style-image:none;
     list-style-position:outside;
     list-style-type:none;
     margin:0;
     padding:0;
   }
     ul li {
      line-height: 1.2em;
     }
      ul li ul {
        display: none; /* узлы свернуты */
      }
        ul li ul li {
         margin: 0 0 0 1.2em;
         border-left: 1px solid silver; /* цвет вертикальной линии между узлами */
        }
        li.last {/* последний узел, соединительную линию к след. узлу убираем */
         border: none; 
        }
   .marker { /* маркер раскрытия списка в закрытом состоянии */
     border-color: transparent transparent transparent gray;
     border-style: solid; 
     border-width: .25em 0 .25em .5em;  
     margin: .35em .25em 0 0; 
     float: left; 
     width: 0px; 
     height: 0px; 
     line-height: 0px;
   }
   .marker.open {/* маркер раскрытия списка в открытом состоянии */
     border-color: gray transparent transparent transparent;
     border-width: .5em .25em 0 .25em;  
   }
  /* IE 6 Fixup */
  * html #multi-derevo * { height: 1%;}
  * html .marker { border-style: dotted dotted dotted solid; }
  * html .marker.open { border-style: solid dotted dotted dotted; }